{{ extend './common/layout.html' }}

{{ block 'main' }}

{{ include './common/header.html' }}
<!-- 主体内容 -->
<div class="content">
    {{ include './common/aside.html' }}
    <div class="main">
        <!-- 分类标题 -->
        <div class="title">
            <h4>文章</h4>
            <span>找到1篇文章</span>
            <a href="article-edit.html" class="btn btn-primary new">发布新文章</a>
        </div>
        <!-- /分类标题 -->
        <!-- 内容列表 -->
        <table class="table table-striped table-bordered table-hover custom-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>标题</th>
                    <th>发布时间</th>
                    <th>作者</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>5b9a716cb2d2bf17706bcc0a</td>
                    <td>JavaScript基础一：基本介绍</td>
                    <td>2020-12-23</td>
                    <td>黑马讲师</td>
                    <td>
                        <a href="article-edit.html" class="glyphicon glyphicon-edit"></a>
                        <i class="glyphicon glyphicon-remove" data-toggle="modal" data-target=".confirm-modal"></i>
                    </td>
                </tr>
                <tr>
                    <td>5b9a716cb2d2bf17706bcc0a</td>
                    <td>JavaScript基础二：代码书写位置</td>
                    <td>2020-12-24</td>
                    <td>黑马讲师</td>
                    <td>
                        <a href="article-edit.html" class="glyphicon glyphicon-edit"></a>
                        <i class="glyphicon glyphicon-remove" data-toggle="modal" data-target=".confirm-modal"></i>
                    </td>
                </tr>
                <tr>
                    <td>5b9a716cb2d2bf17706bcc0a</td>
                    <td>JavaScript基础三：代码注释</td>
                    <td>2020-12-25</td>
                    <td>黑马讲师</td>
                    <td>
                        <a href="article-edit.html" class="glyphicon glyphicon-edit"></a>
                        <i class="glyphicon glyphicon-remove" data-toggle="modal" data-target=".confirm-modal"></i>
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- /内容列表 -->
        <!-- 分页 -->
        <ul class="pagination">
            <li>
                <a href="#">
                    <span>&laquo;</span>
                </a>
            </li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>
                <a href="#">
                    <span>&raquo;</span>
                </a>
            </li>
        </ul>
        <!-- /分页 -->
    </div>
</div>
<!-- /主体内容 -->
<!-- 删除确认弹出框 -->
<div class="modal fade confirm-modal">
    <div class="modal-dialog modal-lg">
        <form class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">请确认</h4>
            </div>
            <div class="modal-body">
                <p>您确定要删除这篇文章吗?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <input type="submit" class="btn btn-primary">
            </div>
        </form>
    </div>
</div>
<!-- /删除确认弹出框 -->

{{ /block }}